<template>
	<div class="test">
		
	</div>
</template>

<script>
	import Hammer from 'hammerjs';
	import { useStore } from "vuex";
	import { onMounted } from 'vue';
	import { useRoute, useRouter } from 'vue-router';
	
	export default {
		setup (props, { emit }) {
			const store = useStore();
			const router = useRouter();
			onMounted(()=>{
				
				var swiper = document.querySelector('.test');
				
				// Create a manager to manager the element
				var manager = new Hammer.Manager(swiper);
				
				// 注册事件
				manager.add(new Hammer.Swipe({ direction: Hammer.DIRECTION_HORIZONTAL  }));
				
				manager.on('swipe', function(e) {
					e.preventDefault();
					var direction = e.offsetDirection; // 2:LEFT,4:RIGHT,8:UP,16:DOWN
					if (direction === 4) {
						// console.log(e.deltaX,'向右滑');
						store.dispatch("setTransition", 'slide-right');
						router.go(-1);
					}else if(direction === 2){
						// console.log(e.deltaX,'向左滑');
					}
				});
			})
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.test{
		height: 100vh;
		background-color: #16418A;
	}
</style>
